
    <%@ page contentType="text/html;charset=UTF-8" language="java" %><!DOCTYPE html>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Demo</title>
        <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
        <link href="//unpkg.com/layui@2.8.7/dist/css/layui.css" rel="stylesheet">
    </head>
    <body>
    <form class="layui-form layui-row layui-col-space16" id="fm" action="#">
        <div class="layui-col-md4">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="StaffName" id="StaffName" value="" placeholder="姓名" class="layui-input" >
            </div>
        </div>
        <div class="layui-col-md4">
            <select name="staffEducationBackground" id="staffEducationBackground" lay-filter="department" style="width: 200px" class="layui-select">
                <option value="-1" style="color: white;">性别</option>
                <option value="1">男</option>
                <option value="0">女</option>
            </select>
        </div>
        <div class="layui-col-md4">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-date"></i>
                </div>
                <select name="staffStatus" id="staffStatus" lay-filter="position" style="width: 200px" class="layui-select">
                    <option value="-1">在职状态</option>
                    <option value="0">在职</option>
                    <option value="1">待离职</option>
                    <option value="2">离职</option>
                </select>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-input-wrap">

                <select name="staffType" id="staffType" lay-filter="position" style="width: 200px" class="layui-select">
                    <option value="-1">工种</option>
                    <option value="1">正式工</option>
                    <option value="2">实习工</option>
                </select>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-input-wrap">
                <select name="staffPosition" id="staffPosition" lay-filter="department" style="width: 200px" class="layui-select">
                    <option value="-1" style="color: white;">职位</option>
                    <option value="0">职员</option>
                    <option value="1">组长</option>
                    <option value="2">车间主任</option>
                    <option value="3">厂长</option>
                </select>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-input-wrap">
                <select name="staffDepartmentId" id="staffDepartmentId" >
                    <option value="-1" style="color: white;">部门</option>
                    <option value="1" style="color: white;">裁剪部</option>
                    <option value="2" style="color: white;">缝纫部</option>
                    <option value="3" style="color: white;">质检部</option>
                    <option value="4" style="color: white;">厂部</option>
                    <option value="5" style="color: white;">技术部</option>
                </select>
            </div>
        </div>

    </form>
    <div class="layui-btn-container layui-col-xs12">
        <button   >搜索</button>
    </div>
    <table class="layui-hide" id="ID-table-demo-data"></table>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.8.7/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        tables()
function tables() {
    layui.use(function(){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        // 创建表格实例
        table.render({
            elem: '#ID-table-demo-data',
            url: '${pageContext.request.contextPath}/staff/queryStaffPunchCardView', // 此处为静态模拟数据，实际使用时需换成真实接口
            page: true, // 开启分页
            limit: 5,
            limits: [5,10,15],
            height: 'full-35',
            lineStyle: 'height: 80px;', // 定义表格的多行样式
            cols: [[
                {field: 'id' , title: 'ID', width: 80,},
                {field: 'staffImg', width: 120, title: '头像', templet:function(d){
                        if(d.staffImg != null)
                            return "<img id='img' src='" + d.staffImg + "' width='70px' style='height='70px'' >";
                    }},
                {field: 'staffName', title: '用户名', width: 160},
                {field: 'staffSex', title: '性别', width: 80},
                {field: 'staffType', title: '工种', width: 80},
                {field: 'staffClockIn', title: '上班时间', width: 160},
                {field: 'staffClockOut', title: '下班时间', width: 160},
                {field: 'staffYearToDate', title: '日期', width: 160},
                {field: 'staffPosition', title: '职位', width: 160},
                {field: 'staffDepartment', title: '部门', width: 80},
                {field: 'workingHours', title: '小时数', width: 80},
                {field: 'staffNumberOfCases', title: '计件数', width: 80},
                { fixed: 'right', title: '操作', width: 160, align: 'center', toolbar: '#templet-demo-theads-tool' }
            ]],
            page: true,
            height: 500
        });
        table.on('tool(ID-table-demo-data)', function(obj){
            if(obj.event === 'dimission'){
                var layer = layui.layer;
                var util = layui.util;
                layer.prompt({title: '密令输入框', formType: 1}, function(pass, index){
                    if(pass=="123"){
                        layer.prompt({title: '产量', formType: 3}, function(text, index){
                            if(text==""||text==null){
                                layer.msg('不能为空', {icon: 0});
                            }else {
                                let id = obj.data.staffId;
                                let staffNumberOfCases = text;
                                let data = {
                                    id: id,
                                    staffNumberOfCases: staffNumberOfCases};
                                $.ajax({
                                    "url"         :  "${pageContext.request.contextPath}/staff/updateByThePieceController",
                                    "type"        :  "post",
                                    "data"        :  data, // 不再需要JSON.stringify()
                                    "dataType"    :  "json",
                                    "success"     :  function(result) {
                                        if(result.code==200){
                                            var table = layui.table;
                                            layer.alert(result.msg)
                                            layer.alert(result.msg, function(){
                                                layer.closeAll();
                                            });
                                            table.reload("ID-table-demo-data");

                                        }else if(result.code==400){
                                            layer.alert(result.msg)
                                        }else {
                                            layer.alert("网络正忙")
                                        }
                                    },
                                    "error"       :  function() {
                                        alert("出错了")
                                    }
                                });
                            }
                        });
                    }else{
                        layer.msg('密码无效！', {icon: 0});
                    }
                });
            } else if(obj.event === 'edit'){

                var layer = layui.layer;
                var util = layui.util;
                layer.prompt({title: '密令输入框', formType: 1}, function(pass, index){
                    if(pass=="123"){
                        let id = obj.data.id;
                        layer.open({
                            type: 1,
                            area: ['420px', '320px'], // 宽高
                            content: '<div style="padding: 20px;"><label for="startTime">上班时间：</label><input type="text" id="startTime" placeholder="上班时间" readonly class="layui-input"><br><br><label for="endTime">下班时间：</label><input type="text" id="endTime" readonly placeholder="下班时间" class="layui-input"><br><br><div style="text-align: center;"><button class="layui-btn layui-btn-primary" onclick="up('+id+')" id="saveBtn">保存</button>&nbsp;<button class="layui-btn layui-btn-primary" onclick="closeEditModal()"  id="cancelBtn" >取消</button></div></div>',
                            success: function() {
                                layui.use('laydate', function() {
                                    var laydate = layui.laydate;
                                    laydate.render({
                                        elem: '#startTime',
                                        type: 'time'
                                    });
                                    laydate.render({
                                        elem: '#endTime',
                                        type: 'time'
                                    });
                                });
                            }
                        });
                    }else{
                        layer.msg('密码无效！', {icon: 0});
                    }
                });



            }
        });


    });
}
    </script>
    <script type="text/html" id="templet-demo-theads-tool">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="dimission">计件</button>
            <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">补卡</button>
        </div>
    </script>
    <script>
        // 关闭编辑弹出层
        function closeEditModal() {
            layer.closeAll();
        }
        function up(id) {
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;
            var startTime = document.getElementById('startTime').value;
            var endTime = document.getElementById('endTime').value;
            var data = JSON.stringify({
                id: id,
                staffClockIn: startTime,
                staffClockOut: endTime
            });

          if(startTime==null ||startTime==""){
              layer.alert("上班时间不能为空")
          }else if(endTime==null||endTime==""){
              layer.alert("下班时间不能为空")
          }else{
              $.ajax({
                  "url": "${pageContext.request.contextPath}/staff/updateReissueCardController", // 要提交的URL路径
                  "type": "post", // 发送请求的方式
                  "data": data , // 要发送到服务器的数据
                  "dataType": "json", // 期望接受的数据格式
                  "contentType": "application/json;charset=utf-8",
                  "success": function (result) { // 请求成功后要执行的代码
                      if (result.code == 200) {
                          alert(result.msg);
                          layer.closeAll();
                          table.reload("ID-table-demo-data");
                      } else if (result.code == 300) {
                          alert(result.msg);
                      } else if (result.code == 400) {
                          alert(result.msg);
                      } else {
                          alert("意料之外的错误!");
                      }
                  },
                  "error": function () { // 请求失败后要执行的代码
                      alert("网络真忙")
                  }
              })
          }
        }
    </script>
    </body>
    </html>